<template>
	<view class="weui-grids poetry-grid">
		<block v-for="(item,index) in grids" :key="index">
      <navigator :url="item.url" class="weui-grid grid-item">
        <view class="poetry-item">
          <image class="poetry-banner" mode="aspectFill" :src="item.image"></image>
          <view class="weui-grid__label grid-item_label">{{item.title}}</view>
        </view>
      </navigator>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				grids: [{
					title: "课本古诗",
					url: "grade/grade",
					image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/9c8782c9-8928-4a53-a779-ec5915ee8f9c.jpg'
				}, {
					title: '排行榜',
					url: 'rank/rank',
					image:'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/c0dce7a1-f77f-46ea-aaf5-fb5311dfa159.jpg'
				}, {
					title: '诗词分类',
					url: 'mark/mark',
					image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/907241cd-f89b-4093-b085-bdd1c5aaa449.jpg'
				}, {
					title: '作者合称',
					url: 'hecheng/hecheng',
					image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/e29f0692-17f7-4053-a5ce-a2d9e8a90fb8.jpg'
				}, {
					title: '史书典籍',
					url: "oldbook/oldbook",
					image: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/88b41396-26f3-4020-95bc-2f5e3640f0e9.jpg'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.poetry-grid {
		width: 90%;
		margin: 10px 5%;
		border-top:1px;
		border-left: 1px;
	}

	.grid-item {
		width: 100%;
		border-right: 1px;
		border-bottom: 1px;
		padding: 5px;
	}
  .poetry-item{
    border-radius: 6px;
  }

	.poetry-banner {
		width: 100%;
		height: 126px;
		border-radius: 5px;
    box-shadow: 0 0 5px #555;
  }

	.grid-item_label {
		position: absolute;
		top: 40%;
		left: 40%;
		font-size: large;
		font-weight: 700;
    /*background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgba(0, 0, 255, .8) 50%, rgb(128, 0, 128) 80%);*/
    background:linear-gradient(135deg,rgb(255, 0, 0),rgba(0, 0, 255, .8),#0396ff);
    -webkit-background-clip: text;
    color: transparent;
	}
</style>
